import React from 'react';
import './Card.css';

interface CardProps {
  title?: string;
  children: React.ReactNode;
  width?: string;
  height?: string;
  padding?: string;
  margin?: string;
  elevation?: 'low' | 'medium' | 'high';
  onClick?: () => void;
  className?: string;
  style?: React.CSSProperties;
  bodyStyle?: React.CSSProperties;
}

export const Card: React.FC<CardProps> = ({
  title,
  children,
  width,
  height,
  padding,
  margin,
  elevation = 'low',
  onClick,
  className = '',
  style = {},
  bodyStyle = {},
}) => {
  const cardClasses = [
    'card',
    `card-${elevation}`,
    onClick ? 'card-clickable' : '',
    className
  ].filter(Boolean).join(' ');

  const cardStyle: React.CSSProperties = {
    width: width || 'auto',
    height: height || 'auto',
    padding: padding || '1rem',
    margin: margin || '0',
    ...style
  };

  return (
    <div 
      className={cardClasses}
      style={cardStyle}
      onClick={onClick}
    >
      {title && <h3 className="card-title">{title}</h3>}
      <div className="card-content" style={bodyStyle}>{children}</div>
    </div>
  );
};

export default Card; 